<template>
    <div class="game_page">
        <navigate>小游戏</navigate>
        <div class="tab_bar">
            <div v-for="(item, index) in tabBar" :key="index" class="item_bar"
                :class="currentBar == index ? 'active_bar' : ''" @click="chooseBar(index)">
                <div class="item_txt">{{ item }}</div>
                <div class="item_line" v-if="currentBar == index"></div>
            </div>
          
        </div>
          <div class="game_box">
            <div class="game_txt">游戏列表</div>
            <div class="game_list">
                <div class="item_game" v-for="(item,index) in 5" :key="index">
                    <img src="" alt="" class="game_img">
                    <div class="game_name">冒险王2</div>
                    <div class="game_use">146人玩过</div>
                </div>
            </div>
          </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            currentBar: 0,
            tabBar: ['益智游戏', '反馈游戏', '阳光明媚'],
        }
    },
    methods: {
        chooseBar(index) {
            this.currentBar = index
        },
        toPlayPage() {
            this.$router.push(`/playMusic`);
        },
        checkImg() {
            this.$router.push(`/pictureBrowse`);
        },
        toArticleDetails() {
            this.$router.push(`/articleDetails`);
        },
    }
}
</script>

<style lang="less" scoped>
.game_page{
    background-color: #f4f6fa;
    color: #333333;
}
.tab_bar {
    display: flex;
    align-items: center;
    color: #333333;
    font-size: 14px;
    padding: 0 20px;
    height: 54.33px;
}

.item_bar {
    margin-right: 40px;
    font-size: 14px;
    font-weight: normal;
    line-height: 1;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    padding-bottom: 10px;
}

.active_bar {
    font-weight: bold;
    color: #00aeff;
}

.item_line {
    position: absolute;
    bottom: -8.33px;
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
    width: 13.33px;
    height: 5.33px;
    background: linear-gradient(-10deg,
            rgba(255, 255, 255, 0.30) 0%,
            rgba(255, 255, 255, 0.00) 100%),
        #00aeff;
    border-radius: 2.67px;
    opacity: 0;
    transition: opacity 0.3s;
}

.active_bar .item_line {
    opacity: 1;
}

.item_bar:last-child {
    margin-right: 0;
}

.game_box{
    margin: 10px;
    padding: 18px 15px;
       background: #ffffff;
border-radius: 6.67px;
}
.game_list{
    display: flex;
    flex-wrap: wrap;
    margin: 26.7px -36.33px -29.67px 0;
 

}
.item_game{
    text-align: center;
    margin: 0 36.33px 29.67px 0 ;
}
.game_txt{
    font-size: 15.33px;
line-height: 15.33px;
}
.game_img{
    display: block;
 width: 83.33px;
height: 83.33px;
}
.game_name{
    font-size: 14px;
line-height: 14px;
margin: 13.33px 0 8.33px;
}
.game_use{
    font-size: 11.33px;
    line-height: 11.33px;
color: #aaaaaa;
}

</style>